<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .box {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-around;
            margin: 0 auto;
            width: 300px;
            height: 450px;
            background-color: rgb(249, 44, 24);
            color: aliceblue;
        }

        .title {
            font-size: 40px;
            font-weight: 400;
        }

        .imgs {
            width: 150px;
            height: 150px;
            /* background-color: aqua; */
            background: url(./imgs/th.jpg) no-repeat;
            background-position: -9px -68px;
            background-size: 170px;
        }

        .footer {
            font-size: 21px;
            color: aliceblue;
        }

        .timer {
            text-align: center;
            line-height: 50px;
            font-size: 30px;
            color: black;
            width: 250px;
            height: 50px;
            background-color: #fff;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="title">京东秒杀</div>
        <div class="imgs"></div>
        <div class="footer">21:00点场 距结束</div>
        <div class="timer"></div>
    </div>
    <script>
        //时间差计算
        function _timer() {
            let nowtime = new Date()
            let h = nowtime.getHours()
            let m = nowtime.getMinutes()
            let s = nowtime.getSeconds()

            let d = nowtime.getDay()
            //目标时间
            let newtime = new Date(`2024/10/${d},21:00;00`)
            //时间差
            let hourgap = 20 - h
            let mintergap = 59 - m
            let secondgap = 60 - s
            return `${hourgap}:${mintergap}:${secondgap}`
        }
        //倒计时
        function timedown() {

        }
        let timer = document.querySelector(' .timer')
        setInterval(function () {
            timer.innerHTML = _timer()

        })
    </script>
</body>

</html>